<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>CRM客户关系管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 	<!-- <link rel="stylesheet" href="/gaoa/Public/css/global.css" media="all"> -->
	<!--<link rel="stylesheet" href="/gaoa/Public/plugins/font-awesome/css/font-awesome.min.css"> -->

	<link rel="stylesheet" href="/gaoa/Public/css/element-ui--index.css">


	<style>
	    *{
	    	font-family: microsoft YaHei;
	    }
		.pull-left {
			float: left;
		}
		.pull-right {
			float: right;
		}
		.container {
			padding: 2px;
		}
		.container > .wrapp >  .el-row {
			margin-bottom: 10px;
		}
		.el-form--inline .el-form-item {
			margin-bottom: 0px;
		}
/*		#app>.wrapp{
			display: none;
		}*/
		
		/*表格条纹样式*/
		.el-table .info-row {
		background: #ffffff;
		}

		.el-table .positive-row {
		background: #c9e5f5;
		}
		.cell img{
			vertical-align: middle;
		}
		
		.el-date-editor.el-input{
			width: 100%;
			max-width: 370px;
		}

		.el-table__body tr.current-row>td{
	      background: rgba(157, 195, 232, 0.7) !important;
	  }

    @media screen and (min-width:1165px) and (max-width:1200px){
      .el-dialog--small {
          width: 70%;
      }
    }

    @media only screen and (max-width:1164px){
      .el-dialog--small {
          width: 85%;
      }
    }  		
	</style>
	<!-- 如果没有 则 提供一些高级的js功能  -->
	<script src="/gaoa/Public/js/advancejs.js"></script>
	<!-- 不支持IE9 及以下的浏览器 -->
	<!--[if lte IE 9]> 
	<script>
		window.location.href="<?php echo U('login/notsupport');?>";
	</script>
	<![endif]-->
	
  <style>
    .el-tabs__header{
      border-top:2px solid #ea4b4b;
      border-bottom: 1px solid #c51f1f;
    }
    .el-dialog .el-tabs__header{
      border-top:none;
    }
    .el-tabs--border-card .el-tabs__item{
      border-left: none;
    }
    .el-tabs--border-card .el-tabs__item.is-active {
      background-color: #fff;
      border-right-color: #d3dce6;
      background: #544b8f;
      color: #fff;
    }
    .el-tabs--border-card .el-tabs__header {
      background-color: #fff;
      margin: 0;
    }
    .container > .wrapp > .a > .el-row {
      margin-bottom: 6px;
    }
    .el-tabs--border-card .el-tabs__content{
      padding:0 9px 5px 9px;
    }
    .el-card, .el-menu--horizontal .el-submenu>.el-menu, .el-tabs--border-card{
      box-shadow: none;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-tabs__item{
    	font-family: Microsoft YaHei;
    	color:#0d0f10;
    	font-size: 14px;
    }
  </style>

</head>
<body>
	
	
	<div id="app" class="container">
		<div class="wrapp" v-show="show" style="display: none">
			<!-- seach form -->
			<el-row>
				<el-col :span="24">
					<el-form :inline="true"  ref="searchForm" :model="searchForm">
		  		  <el-form-item prop="app_status">
              <el-select size="small" style="width:120px;" v-model="searchForm.app_status" 
             placeholder="审批状态">
              <el-option v-for="(value,key) in appStatus" :label="value" :value="key"></el-option>
              </el-select>
		  		  </el-form-item>
		  		  
		  		  <el-form-item prop="type">
              <el-select size="small" style="width:120px;" v-model="searchForm.type" 
              placeholder="申请类型">
              <el-option v-for="(value,key) in appType" :label="value" :value="key"></el-option>
              </el-select>
		  		  </el-form-item>
					
						<el-form-item prop="start">
                <el-date-picker size="small" v-model="searchForm.start" 
                  placeholder="请选择申请时间范围" 
                  @change="startDateChange"
                  type="daterange" style="width:210px;">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="end">
                <el-date-picker 
                  v-model="searchForm.end" 
                  placeholder="请选择期望交付时间范围" 
                  @change="endDateChange"
                  type="daterange"
                  size="small" style="width:210px;">
                </el-date-picker>
            </el-form-item>	

					  <el-form-item> 
					    <el-button type="primary" size="small" icon="search" @click="loadDatalist">查询</el-button>
					    <el-button @click="resetBack" size="small" style="margin-left:10px;">重置</el-button>
					  </el-form-item>
            <el-form-item>
              <el-tooltip content="点击刷新当前页面" placement="right">
                <el-button @click="refresh" size="small" type="danger">刷新</el-button>
              </el-tooltip>
            </el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<!-- / search form -->

			<!-- datatables  -->
			<!-- 勾选用这个:@selection-change="handleSelectionChange";点击选中用@row-click="handleSelectionChange" -->
			<el-row>
				<el-col :span="24">
					<el-table 
					  :data="dataList" 
				      v-loading="dataLoad" 
				      element-loading-text="<?php echo L('DATA_LOGIN');?>"
				      highlight-current-row
				      @row-click="handleChange" @row-dblclick="showInfo"
					 		border>
					 	
					  <el-table-column  label="序号"  width="70" :formatter="handleIndex" >
					  </el-table-column>
				    <el-table-column prop="app_name" label="申请人" width="120" align="center">
				    </el-table-column>
				    <el-table-column prop="type" label="申请类型" width="120" align="center">
				    	  <template scope="scope">
				          {{ getType(scope.row.type, 'appType') }}
				        </template>
				    </el-table-column>
					 	<el-table-column prop="reason" label="申请事由" width="130" align="center">
				    	<template scope="scope">
                {{ scope.row.reason | handleString(6) }}
	            </template>
				    </el-table-column>
				    
				    <el-table-column prop="app_time" label="申请日期" width="190" align="center">
				    </el-table-column>
				     <el-table-column prop="exp_time"  label="期望交付日期" width="190" align="center">
				    </el-table-column>
				    <el-table-column prop="inspector" label="核查人员" width="140" align="center">
				    	<template scope="scope">
					          {{ getType(scope.row.inspector, 'userNames') }}
					        </template>
				    </el-table-column>
				    <el-table-column prop="check_time"  label="核查日期" width="190" align="center">
				    </el-table-column>
				    <el-table-column prop="approval_time"  label="审批日期" width="190" align="center">
				    </el-table-column>
          	<el-table-column  align="center" prop="app_status" label="审批状态" width="150px">
            <template scope="scope">
              <el-tag v-if="scope.row.app_status === '2'" type="primary">待审批</el-tag>
              <el-tag v-else-if="scope.row.app_status === '1'" type="success">审批通过</el-tag>
              <el-tag v-else="scope.row.app_status === '-1'" type="danger">审批不通过</el-tag>
            </template>
          	</el-table-column>
				      
				       
				    <el-table-column prop="remark" label="备注"  align="center" width="150px">
				    	<template scope="scope">
                {{ scope.row.remark | handleString(6) }}
	            </template>
				    </el-table-column>
			    </el-table>
				</el-col>
			</el-row>
			<!-- / datatables  -->
			
			<!-- toolbar -->
				<el-row type="type"  justify="space-between" align="middle"  class="row-bg">
				  <el-col :span="12">
				  <div class="grid-content bg-purple">
				  	<el-button-group>
				  		<el-button size="small"  @click="openDialog('approval')"  type="primary">审批</el-button>
				    </el-button-group>
				  </div>
				  </el-col>
				  <el-col :span="12">
				  <div class="grid-content bg-purple-light pull-right">
				    <!-- page -->
				    <el-pagination
  @current-change="handleCurrentPageChange"
  :current-page="currentPage"
  layout="total, prev, pager, next, jumper"
  :total="total"
  :page-size="pageSize"
  ref="pagination"
  >
</el-pagination>
				    <!-- / page -->
				    
				  </div></el-col>
				</el-row>
			<!-- / toolbar -->
		</div>
		
		<div class="dialogWrapper" v-show="show" style="display: none">
			<el-dialog  :visible.sync="infoDialog">
  <el-form  :label-width="dialogLabelWidth">
  	<el-tabs type="card" v-model='first'>
  		<el-tab-pane label="申请详情" name="first">
  			<el-row>
          <el-col :span="11">
            <el-form-item label="申请人：" prop="app_name" v-show="infoData.app_name && infoData.app_name.length!=0">
               <span>
                   {{ infoData.app_name }}
              </span>
            </el-form-item>
          </el-col>
             <el-col :span="11">
              <el-form-item label="申请类型：" prop="app_name" v-show="infoData.type && infoData.type.length!=0">
                 <span>
                  {{ getType(infoData.type, 'appType') }}
              </span>
              </el-form-item>
          </el-col>
       </el-row>
       
       <el-row>
          <el-col :span="11">
            <el-form-item label="使用部门：" prop="belongs_department" v-show="infoData.belongs_department && infoData.belongs_department.length!=0">
               <span>
                {{ infoData.belongs_department }}
              </span>
            </el-form-item>
          </el-col>
             <el-col :span="11">
              <el-form-item label="申请原因：" prop="reason" v-show="infoData.reason && infoData.reason.length!=0">
                 <span>
                   {{ infoData.reason }}
              </span>
              </el-form-item>
          </el-col>
       </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="申请时间：" prop="app_time" v-show="infoData.app_time && infoData.app_time.length!=0">
              <span>
                {{ infoData.app_time }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="期望交付时间：" prop="exp_time" v-show="infoData.exp_time && infoData.exp_time.length!=0">
              <span>
                {{ infoData.exp_time }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="用品名称：" prop="name" v-show="infoData.name && infoData.name.length!=0">
              <span>
                {{ infoData.name }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="规格：" prop="specification" v-show="infoData.specification && infoData.specification.length!=0">
              <span>
                {{ infoData.specification }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="物品单位：" prop="unit" v-show="infoData.unit && infoData.unit.length!=0">
              <span>
                {{ infoData.unit }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="物品单价：" prop="price" v-show="infoData.price && infoData.price.length!=0">
              <span>
                {{ infoData.price }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="数量：" prop="num" v-show="infoData.num && infoData.num.length!=0">
              <span>
                {{ infoData.num }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="物品总金额：" prop="sum" v-show="infoData.sum && infoData.sum.length!=0">
              <span>
                {{ infoData.sum }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="活动主题：" prop="theme" v-show="infoData.theme && infoData.theme.length!=0">
              <span>
                {{ infoData.theme }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="活动内容：" prop="contents" v-show="infoData.contents && infoData.contents.length!=0">
              <span>
                {{ infoData.contents }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="活动时间：" prop="activity_time" v-show="infoData.activity_time && infoData.activity_time.length!=0">
              <span>
                {{ infoData.activity_time }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="活动地点：" prop="activity_spot" v-show="infoData.activity_spot && infoData.activity_spot.length!=0">
              <span>
                {{ infoData.activity_spot }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="活动经费：" prop="activity_funds" v-show="infoData.activity_funds && infoData.activity_funds.length!=0">
              <span>
                {{ infoData.activity_funds }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="组织者：" prop="organizer" v-show="infoData.organizer && infoData.organizer.length!=0">
              <span>
                {{ infoData.organizer }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="22">
            <el-form-item label="参与人员：" prop="participant" v-show="infoData.participant && infoData.participant.length!=0">
              <span>
                {{ infoData.participant }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="出差开始时间：" prop="bt_start" v-show="infoData.bt_start && infoData.bt_start.length!=0">
              <span>
                {{ infoData.bt_start }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="出差结束时间：" prop="bt_end" v-show="infoData.bt_end && infoData.bt_end.length!=0">
              <span>
                {{ infoData.bt_end }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="出差地点：" prop="bt_spot" v-show="infoData.bt_spot && infoData.bt_spot.length!=0">
              <span>
                {{ infoData.bt_spot }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="预支经费：" prop="advance_payment" v-show="infoData.advance_payment && infoData.advance_payment.length!=0">
              <span>
                {{ infoData.advance_payment }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="申请备用金额：" prop="reserve_money" v-show="infoData.reserve_money && infoData.reserve_money.length!=0">
              <span>
                {{ infoData.reserve_money }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="使用月份：" prop="month" v-show="infoData.month && infoData.month.length!=0">
              <span>
                {{ getType(infoData.month, 'monthType') }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="核查时间：" prop="check_time" v-show="infoData.check_time && infoData.check_time.length!=0">
              <span>
                {{ infoData.check_time }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
	          <el-form-item label="核查备注：" prop="no_pass_reason_one" v-show="infoData.no_pass_reason_one && infoData.no_pass_reason_one.length!=0">
	            <span>
	              {{ infoData.no_pass_reason_one }}
	            </span>
	          </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="审批时间：" prop="approval_time" v-show="infoData.approval_time && infoData.approval_time.length!=0">
              <span>
                {{ infoData.approval_time }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="审批备注：" prop="no_pass_reason_two" v-show="infoData.no_pass_reason_two && infoData.no_pass_reason_two.length!=0">
              <span>
                {{ infoData.no_pass_reason_two }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="核查人员：" prop="inspector" v-show="infoData.inspector && infoData.inspector.length!=0">
              <span>
                {{ getType(infoData.inspector, 'userNames') }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="审批人员：" prop="approver" v-show="infoData.approver && infoData.approver.length!=0">
              <span>
                {{ getType(infoData.approver, 'userNames') }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="11">
            <el-form-item label="抄送人员：" prop="send_copy" v-show="infoData.send_copy && infoData.send_copy.length!=0">
              <span>
                {{ infoData.send_copy }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="申请备注：" prop="remark" v-show="infoData.remark && infoData.remark.length!=0">
              <span>
                {{ infoData.remark }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        
        
        
  		</el-tab-pane>
  		
  		<el-tab-pane label="附件信息" name="second" v-show="false">
  			
  		</el-tab-pane>
  	</el-tabs>
  </el-form>

  <div slot="footer" class="dialog-footer">
   <el-button type="primary" @click="infoDialog = false">知道了</el-button>
  </div>

</el-dialog>

			<el-dialog title="审批操作" v-model="approvalFormDialog" @open="beforeApproval">
  <el-form  ref="approvalForm" :label-width="dialogLabelWidth" :model="approvalForm" :rules="addRules">
    <el-row>
      <el-col :span="24">
        <el-form-item label="核查操作" prop="app_status">
          <el-radio-group v-model="approvalForm.app_status">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="-1">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="no_pass_reason_two">
				  <el-input type="text" v-model="approvalForm.no_pass_reason_two" auto-complete="off" placeholder="若不通过，请给出原因"></el-input>
				</el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <div slot="footer" class="dialog-footer">
   <el-button @click="closeDialog('approval')">取 消</el-button>
   <el-button type="primary" v-show="!approvalFormSubmitStatus" @click="approvalFormSubmit(page.approvalUrl, 'approval')" >确 定</el-button>
   <el-button type="primary" v-show="approvalFormSubmitStatus" :loading="true" >操作中</el-button>
  </div>

</el-dialog>

		
		</div>

	</div>

	<script src="/gaoa/Public/js/vue.min.js"></script>
  <script src="/gaoa/Public/js/element-ui--index.js"></script>
	<script src="/gaoa/Public/js/vue-resource.min.js"></script>

	<!-- vue 通用部分  -->
	<script src="/gaoa/Public/js/vueHooks.js"></script>
	<script src="/gaoa/Public/js/vueMethods.js"></script>
	<script src="/gaoa/Public/js/vueOption.js"></script>
	<script src="/gaoa/Public/js/vueCommonLogic.js?b=d"></script>
	<script>
		var page = {
			addFormUrl:"<?php echo U('add');?>",
			editFormUrl:"<?php echo U('edit');?>",
			listUrl:"<?php echo U('getList');?>",
			deleteUrl:"<?php echo U('delete');?>",
			pageSize:<?php echo ($pageSize); ?>
		}
		window.defaultOption = new VueOption();

		// setCommonLogin 还可以再细分
		setCommonLogic(window.defaultOption);


	</script>

	<!-- / vue 通用部分  -->


	<script>
		
		
	</script>


	
<script>
	page.approvalUrl="<?php echo U(approval);?>";
	window.defaultOption.setDatas({
    multipleSelection: [],
    userNames:<?php echo json_encode($userNames);?>,
    appType:<?php echo json_encode($appType);?>,
    departmentType:<?php echo json_encode($departmentType);?>,
    monthType:<?php echo json_encode($monthType);?>,
    appStatus:<?php echo json_encode($appStatus);?>,
    dataList:[],
    infoDialog:false,
    infoData:{},
    first:'first',
    addRules:{
			app_status:[
      {required: true, message: '请选择是否通过'},
			]
		},
    }).setForm('search',{
    type:"",
    app_status:'',
    start:"",
    end:"",
    }).setForm('approval',{
    	id:"",
      app_status:"",
      remark:"",
    },true).setMethod('resetBack',function(){
    window.location.href="<?php echo U('index');?>";
  }).setMethod('getType', function(type, field){
 		return this[field][type];
  }).setMethod('startDateChange', function(v){
    this.searchForm.start1 = v.slice(0,10);
    this.searchForm.start2 = v.slice(13);
  }).setMethod('endDateChange', function(v){
    this.searchForm.end1 = v.slice(0,10);
    this.searchForm.end2 = v.slice(13);
  }).setMethod('handleChange', function(val){
	  this.multipleSelection = val; //点击勾选用这个
		//点击选中用这个 开始
		/*this.deleteArrAllItem('multipleSelection');
		this.multipleSelection.push(val) ;*/
		//点击选中用这个 结束
	    
	}).setMethod('showInfo',function(row, event){
    this.infoData = row;
    this.infoDialog = true;
  }).setMethod('beforeApproval', function(){
	    var form = 'approval';
	    var vmThis = this;
	    if (this.multipleSelection.length ==0 ) {
	      this.closeDialog(form);
	      this.$message.error('请先选择一条信息');
	    } else if(this.multipleSelection.length > 1){
	    	this.closeDialog(form);
	        this.$message.error('只能选择一条信息');
	    } else {
	       var row = this.multipleSelection;
	       this.approvalForm.id = row.id;
	       console.log(row);
	       if(row.approval_time){
	       	this.closeDialog(form);
	       	this.$message.error('该条信息已审批，不可再次审批 ！');
	       }else{
	       	 this.openDialog(form);
	       }
	    }
	  })
</script>

	<script>
	//改modal

		window.defaultVm = new Vue(window.defaultOption.getOption()).$mount('#app');
	</script>
</body>
</html>